{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>百知Python课程管理系统-注册</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    {#    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>#}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    {#    <script type="text/javascript" src="/static/js/register.js"></script>#}

    <script>

        function checkusername(t) {
            var name = t.value
            var tip = document.getElementsByClassName('error_tip')[0]
            var regex = /^[\u4E00-\u9FA5]{2,10}$/
            var result = regex.test(name)

            if (result) {
                tip.style.display = 'none'
                $.ajax({
                    type: 'post',
                    url: '{% url 'login:check_name' %}',
                    data: "csrfmiddlewaretoken={{ csrf_token }}&username=" + name,
                    success: function (resp) {
                        if (resp === '1') {
                            tip.innerHTML = '正确'
                        } else {
                            tip.style.display = 'inline-block'
                            tip.innerHTML = '用户名重复，请重新输入'
                        }
                    }
                })
            } else if (name === '') {
                tip.innerHTML = '用户名不能为空'
                tip.style.display = 'inline-block'
            } else {
                tip.innerHTML = '请输入2-10位中文名称'
                tip.style.display = 'inline-block'

            }
        }

        function checkpwd(t) {
            var content = t.value
            var tip = document.getElementsByClassName('error_tip')[1]
            var reg = /^(\w){6,20}$/
            var result = reg.test(content)
            if (result) {
                tip.innerHTML = '正确'
                tip.style.display = 'none'
            } else if (content === '') {
                tip.innerHTML = '密码不能为空'
                tip.style.display = 'inline-block'
            } else {
                tip.innerHTML = '密码只能输入6-20个字母、数字、下划线'
                tip.style.display = 'inline-block'

            }
        }

        function repeatpwd(t) {
            var content = t.value
            var tip = document.getElementsByName('pwd')[0].value
            var tip3 = document.getElementsByClassName('error_tip')[2]
            var tip2 = t.value
            if (tip === tip2) {
                tip3.innerHTML = '正确'
                tip3.style.display = 'none'
            } else if (content === '') {
                tip3.innerHTML = '确认密码不能为空'
                tip3.style.display = 'inline-block'
            } else {
                tip3.innerHTML = '密码不一致'
                tip3.style.display = 'inline-block'
            }
        }

        function checkemail(t) {
            var content = t.value
            var tip = document.getElementsByClassName('error_tip')[3]
            var email = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
            var result = email.test(content)
            if (result) {
                tip.innerHTML = '正确'
                tip.style.display = 'none'

            } else if (content === '') {
                tip.innerHTML = '邮箱不能为空'
                tip.style.display = 'inline-block'
            } else {
                tip.innerHTML = '邮箱格式不符'
                tip.style.display = 'inline-block'

            }
        }

        function submit1() {
            var name = document.getElementsByClassName('error_tip')[0]
            var pwd = document.getElementsByClassName('error_tip')[1]
            var repeatpwd = document.getElementsByClassName('error_tip')[2]
            var email = document.getElementsByClassName('error_tip')[3]
            var tip = document.getElementsByClassName('error_tip')[4]
            var captcha = document.getElementsByName('captcha')[0].value
            var allow = document.getElementsByName('allow')[0].checked
            if (allow === false) {
                alert('请勾选同意按钮')
                return
            }

            if (name.innerHTML === '正确' && pwd.innerHTML === '正确'
                && repeatpwd.innerHTML === '正确' && email.innerHTML === '正确'
                && tip.innerHTML === '验证码不是空') {
                $.ajax({
                        type: 'post',
                        url: '{% url 'login:check_register' %}',
                        data: "csrfmiddlewaretoken={{ csrf_token }}&" + $('.form1').serialize(),
                        success: function (resp) {
                            console.log(resp)
                            if (resp === '0') {
                                tip.style.display = 'inline-block'
                                tip.innerHTML = '验证码输入错误'
                            } else if (resp === '1') {
                                tip.style.display = 'none'
                                if (confirm("请等待管理员激活您的账号")) {
                                    window.location.href = 'http://127.0.0.1:8000/login/login/'
                                    return true;
                                } else {
                                    return false;
                                }
                            } else if(resp===2){
                                alert('输入信息有误，请检查')
                            }else if(resp===3){
                                alert('您输入的用户名已注册，请重新检查，[○･｀Д´･ ○]')
                            }else{
                                alert('注册失败')
                            }
                        }
                    }
                )
            } else if (name.innerHTML === '用户名不能为空' || pwd.innerHTML === '密码不能为空' ||
                repeatpwd.innerHTML === '确认密码不能为空' || email.innerHTML === '邮箱不能为空' ||
                tip.innerHTML === '验证码不能为空') {
                if (name.innerHTML === '用户名不能为空') {
                    name.innerHTML = '用户名不能为空'
                    name.style.display = 'inline-block'
                }
                if (pwd.innerHTML === '密码不能为空') {
                    pwd.innerHTML === '密码不能为空'
                    pwd.style.display = 'inline-block'
                }
                if (repeatpwd.innerHTML === '确认密码不能为空') {
                    repeatpwd.innerHTML === '确认密码不能为空'
                    repeatpwd.style.display = 'inline-block'
                }
                if (email.innerHTML === '邮箱不能为空') {
                    email.innerHTML === '邮箱不能为空'
                    email.style.display = 'inline-block'
                }
                if (tip.innerHTML === '验证码不能为空') {
                    tip.innerHTML === '验证码不能为空'
                    tip.style.display = 'inline-block'
                }
            } else {
                alert('请正确输入所有内容')
            }
        }

        function changeCap() {
            var img = document.getElementsByClassName('img1')[0]
            img.src = "{% url 'login:get_cap' %}" + "?" + new Date().getTime()
        }


        function checkcaptcha(t) {
            var content = t.value
            var tip = document.getElementsByClassName('error_tip')[4]
            if (content==='') {
                tip.innerHTML = '验证码不能为空'
                tip.style.display = 'inline-block'

            } else{
                tip.innerHTML = '验证码不是空'
                tip.style.display = 'none'
            }
        }

    </script>


</head>
<body>
<div class="register_con">
    <div class="l_con fl">
        <a class="reg_logo"><img src="/static/images/bz_logo.gif"></a>
        <div class="reg_slogan">站在时代风口 · 抢占人工智能</div>
        <div class="reg_banner"></div>
    </div>

    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1>用户注册</h1>
            <a href="{% url 'login:login' %}">登录</a>
        </div>
        <div class="reg_form clearfix">
            <form class="form1">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" name="username" id="user_name" placeholder="请输入真实姓名"
                               onblur='checkusername(this)'>
                        <span class="error_tip">用户名不能为空</span>
                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" name="pwd" id="pwd" placeholder="请输入密码"
                               onblur='checkpwd(this)'>
                        <span class="error_tip">密码不能为空</span>
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" name="cpwd" id="cpwd" placeholder="请输入确认密码"
                               onblur='repeatpwd(this)'>
                        <span class="error_tip">确认密码不能为空</span>
                    </li>
                    <li>
                        <label>邮箱:</label>
                        <input type="text" name="email" id="email" placeholder="请输入邮箱"
                               onblur='checkemail(this)'>
                        <span class="error_tip">邮箱不能为空</span>
                    </li>
                    <li>
                        <label>验证码:</label>
                        <input type="text" name="captcha" id="captcha" style="width: 100px;"
                        onblur='checkcaptcha(this)'>
                        <img src="{% url 'login:get_cap' %}" class="img1" alt="" width="80">
                        <a href="#" onclick="changeCap()" style="text-decoration: underline;">看不清，换一张</a>
                        <span class="error_tip" id="tip_captcha" width="80">验证码不能为空</span>
                    </li>
                    <li class="agreement">
                        <input type="checkbox" name="allow" id="allow" checked="checked">
                        <label>同意”百知课程管理系统使用协议“</label>
                        <span class="error_tip2">请勾选</span>
                    </li>
                    <li class="reg_sub">
                        <input type="button" value="注 册" name="" onclick="submit1()">
                    </li>
                </ul>
            </form>
        </div>

    </div>

</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2020 北京百知教育科技有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>

</body>
</html>
